<script>
import Quill from 'quill'
import {getUser} from "../../utils/utils"; // 引入编辑器
// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)

export default {
  name: "Mine",


  data(){
    return{
      user:{},
      showFlag:0,
      pageInfo:{},
      pageSize:24,
      searchKey:'',
      likeList:[],
      showData:{},
      myComment:'',
      myComment1:'',
      showInput:0,
      visible:false,
      title:'',
      blogCover:'',
      dialogVisible:false,

      /* 富文本 */

      uploadFileUrl:'http://localhost:8081/community/appendImg',
      content: '', //双向数据绑定数据
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ direction: 'rtl' }], // 文本方向
              [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['link', 'image', 'video'] // 链接、图片、视频
            ],  // 工具栏选项
            handlers: {
              'image': function (value) {
                if (value) { // value === true
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
            } // 链接、图片、视频
        },
        placeholder: '请输入正文'
      },
      fileUpload:{},
    }
  },
  methods:{
    uploadCover(resp,file,fileList){
      if(resp.flag){
        this.blogCover=resp.msg
        this.$message.success('上传成功')
      }else{
        this.$message.error(resp.msg)
      }
    },
    handlePreview(resp,file,fileList){
      if(resp.flag){
        this.onUploadHandler(resp.msg)
      }else{
        this.$message.error(resp.msg)
      }
    },
    onUploadHandler(imageUrl){
      // const imageUrl = 'http://192.168.138.131:9000/picture/11.jpeg'
      //
      // // 获取光标所在位置
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 插入图片
      quill.insertEmbed(length, 'image', imageUrl)
      // 调整光标到最后
      quill.setSelection(length + 1)
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      // console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      // console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      // console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      // console.log('editor change!', quill, html, text)
      this.content = html
    },

    handleChange(file){
      this.blogCover=file
    },
    upload(){
      if (!this.title){
        this.$message.info('请输入标题')
        return
      }
      if (!this.blogCover){
        this.$message.info('请选择文章标题')
        return;
      }
      if (!this.content){
        this.$message.info('请输入内容')
        return;
      }
      let fd = new FormData
      fd.append('title',this.title)
      fd.append('blog',this.content)
      fd.append('coverPath',this.blogCover)
      fd.append('creatBy',this.user.id)
      this.$axios.post('community/uploadBlog',fd).then(resp=>{
        if (resp.data.flag){
          this.$message.success('添加成功')
          this.showFlag=0
          this.title=''
          this.blogCover=''
          this.content=''
        }else{
          this.$message.error('添加失败')
        }
      })
    },
    /*myCode*/
    addBlog(){
      this.showFlag=2
    },
    del(blog){
      this.visible=true
      this.$axios.post('community/delete?id='+blog.id).then(resp=>{
        if (resp.data.flag){
          this.$message.success('删除成功')
          this.paging(1)
        }else {
          this.$message.error('删除失败')
        }
      })
    },
    sendComment(parentCommentId,flag,comment){
      if (flag){
        if (!this.myComment){
          this.$message.info('请输入评论')
          return
        }
        const fd=new FormData
        fd.append('blogId',this.showData.id)
        fd.append('userId',this.user.id)
        fd.append('content',this.myComment)
        fd.append('parentCommentId',parentCommentId)
        this.$axios.post('community/sendComment',fd).then(resp=>{
          if (resp.data.flag){
            this.showData.commentCount++
            this.showData.comments.unshift(
              {
                'blogId':this.showData.id,
                'userId':this.user.id,
                'content':this.myComment,
                'parentCommentId':parentCommentId,
                'createTime':new Date,
                'user':this.user,
                'id':resp.data.data.id,
                'childComments':[]
              }
            )
            this.myComment=''
            this.$message.success(resp.data.msg)
          }else {
            this.$message.error(resp.data.msg)
          }
        })
      }else {
        if(!this.myComment1){
          this.$message.info('请输入评论')
        }else{
          const fd=new FormData
          fd.append('blogId',this.showData.id)
          fd.append('userId',this.user.id)
          fd.append('content',this.myComment1)
          fd.append('parentCommentId',parentCommentId)
          this.$axios.post('community/sendComment',fd).then(resp=>{
            if (resp.data.flag){
              this.showData.commentCount++
              comment.childComments.unshift(
                {
                  'blogId':this.showData.id,
                  'userId':this.user.id,
                  'content':this.myComment1,
                  'parentCommentId':parentCommentId,
                  'createTime':new Date,
                  'user':this.user,
                  'id':resp.data.data.id
                }
              )
              this.myComment1=''
              this.$message.success(resp.data.msg)
            }else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      }
    },
    back(flag){
      this.showFlag=flag
    },
    addLike(blog){
      this.$axios.post('community/like?blogId='+blog.id+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.getLike()
          blog.likeCount++
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    removeLike(blog){
      this.$axios.post('community/dlike?blogId='+blog.id+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.getLike()
          blog.likeCount--
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    getLike(){
      this.$axios.get('community/getLike?id='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.likeList=resp.data.data
        }else {
          this.$message.error('获取点赞id失败，请联系管理员')
        }
      })
    },
    view(blog){
      this.showData=blog
      this.showFlag=1
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    paging(curPage){
      this.$axios.get('/community/getBlogByUserId?userId='+this.user.id+'&curPage='+curPage+'&pageSize='+this.pageSize+'&searchKey='+this.searchKey).then(resp=>{
        this.pageInfo=resp.data.data
      })
    },
  },
  created() {
    this.user=getUser()
    this.paging(1)
    this.getLike()
  }
}
</script>

<template>
<div>
  <div v-if="showFlag===0">
    <div>
      <el-input v-model="searchKey" placeholder="请输入搜索条件" style="width: 70%"></el-input>
      <el-button type="primary" @click="paging(1)">搜索</el-button>
      <el-button type="warning" @click="addBlog">+</el-button>
    </div>
    <div class="mainuse">
      <el-card shadow="hover" style="width: 98%; height: auto" v-for="blog in pageInfo.list">
        <div slot="header" class="clearfix" style="display: flex; align-items: center;">
          <img :src="blog.user.headphoto" class="user-avatar" v-if="blog.user.headphoto!==null">
          <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="user-avatar" v-if="blog.user.headphoto===null">
          &nbsp;&nbsp;
          <span >{{blog.user.name}}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button style="float: right; padding: 3px 0" type="text" @click="view(blog)">查看</el-button>

          <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <p>删除后无法回复，确认删除？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="del(blog)">确定</el-button>
            </div>
            <el-button slot="reference" style="float: right; padding: 3px 0" type="text">删除</el-button>
          </el-popover>

        </div>
        <div>
          <p v-html="blog.title">{{blog.title}}</p>
          <img :src="blog.coverPath" style="width: 100%;height: auto">
        </div>
        <el-divider></el-divider>
        <div>
          <i class="el-icon-chat-dot-square">{{blog.commentCount}}</i>
          <i class="el-icon-star-off" v-if="!(likeList.includes(blog.id))" @click="addLike(blog)">{{blog.likeCount}}</i>
          <i class="el-icon-star-on" v-if="likeList.includes(blog.id)" @click="removeLike(blog)">{{blog.likeCount}}</i>
        </div>
      </el-card>
    </div>
    <div style="display: flex;  justify-content: center;" v-if="pageInfo.pageSize>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="pageInfo.pageNum"
        :page-sizes="[24,36,48,60]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>
    <div v-if="pageInfo.pageSize===0">
      <h1>空空如也</h1>
    </div>
  </div>
  <div v-if="showFlag===1">
    <el-button type="primary" @click="back(0)">返回</el-button>
    <br>
    <h1 style="text-align: center" v-html="showData.title"></h1>
    <div>
      <div v-html="showData.blog"></div>
    </div>
    <div >
      <br><br>
      <div>
        <span style="font-size: large">评论&nbsp;</span><span style="font-size: small">{{showData.commentCount}}</span>
        <br>
        <el-input v-model="myComment" placeholder="发个友善的评论交流一下吧！" style="width: 90%"></el-input><el-button type="primary" @click="sendComment(0,true)">发送</el-button>
      </div>
      <div v-for="comment in showData.comments">
        <img :src="comment.user.headphoto" class="avatar" v-if="comment.user.headphoto!==null">
        <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="avatar" v-if="comment.user.headphoto===null">
        <!--<img class="avatar" :src="comment.user.headphoto" alt="头像">-->
        <span style="vertical-align: top;font-size: medium;color: rgba(251,114,153,0.8)">{{comment.user.name}}</span>
        <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="comment.user.id===showData.creatBy">帖主</el-tag></span>
        <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="comment.user.id===user.id">我</el-tag></span>
        <div style="margin-left: 40px">
          <span>{{comment.content}}</span>
          <el-button type="text" @click="showInput=comment.id">回复</el-button>
          <div v-for="childComments in comment.childComments">
            <img :src="childComments.user.headphoto" class="c-avatar" v-if="childComments.user.headphoto!==null">
            <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="c-avatar" v-if="childComments.user.headphoto===null">
            <!--<img class="avatar" :src="childComments.user.headphoto" alt="头像">-->
            <span style="vertical-align: top;font-size: small;color: rgba(251,114,153,0.8)">{{childComments.user.name}}</span>
            <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="childComments.user.id===showData.creatBy">帖主</el-tag></span>
            <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="childComments.user.id===user.id">我</el-tag></span>
            <span style="font-size: 13px">{{childComments.content}}</span>
            <div style="margin-left: 30px">
            </div>
            <br>
          </div>
          <div  v-if="showInput===comment.id">
            <el-input v-model="myComment1" placeholder="发个友善的评论交流一下吧！" style="width: 90%"></el-input><el-button type="primary" @click="sendComment(comment.id,false,comment)">发送</el-button>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
  </div>

  <div v-if="showFlag===2">
    <el-button type="text" @click="back(0)">返回</el-button>
    <el-input v-model="title" placeholder="请输入标题" style="width: 30%"></el-input>
    <el-dialog
      title="上传封面"
      :visible.sync="dialogVisible"
      width="30%">
      <el-upload
        style="display: inline"
        :action="uploadFileUrl"
        name="photo"
        :auto-upload="true"
        list-type="picture-card"
        :limit="1"
        :on-success="uploadCover"
      >
        <el-button type="primary">上传封面</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-button style="display: inline" type="primary" @click="dialogVisible=true">上传封面</el-button>
    <el-button style="display: inline" type="primary" @click="upload">提交</el-button>

    <quill-editor
      style="height: 500px"
      class="ql-editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>

    <el-upload
      :action="uploadFileUrl"
      name="photo"
      v-show="false"
      class="avatar-uploader"
      :data='fileUpload'
      :show-file-list="false"
      :on-success="handlePreview"
    >
    </el-upload>




  </div>

</div>
</template>

<style scoped>
.mainuse{
  margin-top: 10px;
  padding-left: 10px;
  column-count: 4;
  column-gap: 0;
  margin-bottom: 150px;
}
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 15px;
}
.avatar{
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 18px;
}
.c-avatar{
  cursor: pointer;
  width: 25px;
  height: 25px;
  border-radius: 18px;
}



/*fuwfbf */
// 给文本内容加高度，滚动条
.quill-editor /deep/ .ql-container {
  min-height: 220px;
}

.ql-container {
  min-height: 230px;
}

/deep/ {
  .ql-snow .ql-tooltip [data-mode="link"]::before {
    content: "请输入链接地址:";
    left: 0;
  }

  .ql-snow .ql-tooltip.ql-editing {
    left: 0 !important;
  }

  .ql-snow .ql-tooltip {
    left: 0 !important;
  }

  .ql-snow .ql-editor {
    max-height: 300px;
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px" !important;
    font-size: 14px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: "10px" !important;
    font-size: 10px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: "12px" !important;
    font-size: 12px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px" !important;
    font-size: 16px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px" !important;
    font-size: 18px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px" !important;
    font-size: 20px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30px" !important;
    font-size: 30px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: "32px" !important;
    font-size: 32px;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "宋体" !important;
    font-family: "SimSun";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体" !important;
    font-family: "SimHei";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑" !important;
    font-family: "Microsoft YaHei";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体" !important;
    font-family: "KaiTi";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋" !important;
    font-family: "FangSong";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
    font-family: "Arial";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "Times New Roman" !important;
    font-family: "Times New Roman";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif" !important;
    font-family: "sans-serif";
  }

  .ql-font-SimSun {
    font-family: "SimSun";
  }

  .ql-font-SimHei {
    font-family: "SimHei";
  }

  .ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
  }

  .ql-font-KaiTi {
    font-family: "KaiTi";
  }

  .ql-font-FangSong {
    font-family: "FangSong";
  }

  .ql-font-Arial {
    font-family: "Arial";
  }

  .ql-font-Times-New-Roman {
    font-family: "Times New Roman";
  }

  .ql-font-sans-serif {
    font-family: "sans-serif";
  }

/*  .ql-snow.ql-toolbar .ql-formats .ql-revoke {
    background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
    width: 20px;
    height: 20px;
    filter: grayscale(100%);
    opacity: 1;
  }

  .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
    background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
    width: 20px;
    height: 20px;
    filter: none;
    opacity: 0.9;
  }*/

/*  img {
    filter: grayscale(100%);
    opacity: 1;
  }*/

/*  img:hover {
    filter: none;
    opacity: 0.9;
  }*/

  /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
    height: 125px;
    overflow: auto;
  }
}

</style>
